export default {
  props: {
    scrollw: {
      type: Number,
      default: 54
    },
    isshowswiper: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    scrollwStyle() {
      console.log(this.scrollw, 'this.scrollw')
      return {
        width: this.scrollw + 'px',
        height: this.scrollw + 'px',
      }
    },
    showText() {
      return this.scrollw > 54
    },
    slideTransform() {
      // 计算当前幻灯片的 transform 值
      return `translateX(${this.currentIndex * -100}%)`;
    },
    transformX() {
      // 计算当前幻灯片的 transform 值
      return `translateX(${this.x}px)`
    }
  },
  data() {
    return {
      images: [
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 1' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 2' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 3' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 4' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 5' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 6' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 1' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 2' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 3' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 4' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 5' },
        { src: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg', alt: 'Image 6' },
      ],
      slides: [
        {
          src: "https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg",
          text: "1",
        },
        {
          src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦动态@2x (3).png",
          text: "2",
        },
        {
          src: "https://100000063-1252208446.file.myqcloud.com/images/01.jpg",
          text: "3",
        },
        {
          src: "https://100000063-1252208446.file.myqcloud.com/images/shear–celeste B@2x.png",
          text: "4",
        },
        {
          src: "https://100000063-1252208446.file.myqcloud.com/images/限定发售-图片@2x (1).png",
          text: "5",
        },
        {
          src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦珍稀年份系列@2x (1).png",
          text: "6",
        },
        {
          src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦传奇系列@2x.png",
          text: "7",
        },
      ],
      currentIndex: 0,
      startX: 0,
      deltaX: 0,
      isDragging: false,
      containerWidth: 0,
      x: 0,
      transform: `translateX(${this.x}px)`,

      scrollStratX:0,
      scrollDeltaX:0
    };
  },
  methods: {
    onScroll(event) {
      console.log('当前滚动位置:', event);
    },
    touchStart(event) {
      this.startX = event.touches[0].clientX;
    },
    touchMove(event) {
      this.deltaX = event.touches[0].clientX - this.startX;
      if (this.deltaX < 300 && this.deltaX > -300) {
        this.x = this.deltaX;
      }
    },
    touchEnd() {
      this.x = 0;
      this.handleSwipe();
    },
    handleSwipe() {
      if (this.deltaX > 50 && this.currentIndex > 0) {
        this.currentIndex--;
      } else if (
        this.deltaX < -50 &&
        this.currentIndex < this.slides.length - 1
      ) {
        this.currentIndex++;
      }
      this.deltaX = 0;
    },
    goToSlide(index) {
      this.currentIndex = index;
    },
    leftChange() {
      if (this.currentIndex <= 0) return;
      this.currentIndex--;
    },
    rightChange() {
      if (this.currentIndex >= this.slides.length - 1) return;
      this.currentIndex++;
    },
    scrollTouchStart(event) {
     this.scrollStratX = event.touches[0].clientX;
     console.log(this.scrollStratX)
    },
    scrollTouchMove(event) {
      this.scrollDeltaX = event.touches[0].clientX - this.scrollStratX;
      console.log(this.scrollDeltaX,'this.scrollDeltaX')

    }, 
    scrollTouchEnd(event) {

    },
  },
  //  myScroll在滑动的同时切换锁定图片

  template: `
  <div style="height:100%;">
  <div class="drawer-scroll-title" v-if="scrollw <= 54">Neighbourhoods</div>
  <div class="myScroll" @scroll="onScroll" @touchstart="scrollTouchStart" @touchmove="scrollTouchMove" @touchend="scrollTouchEnd" v-if="!isshowswiper">
    <div class="content">
      <div v-for="(image, index) in images" :key="index">
        <img :src="image.src" :alt="image.alt" :style="scrollwStyle" :class="{ lastImage: index === images.length - 1 }" />
        <p v-if="showText" style="color:#fff;">The city of FRGMT Hiroshi Fujiwara</p>
      </div>
    </div>
  </div>
  <div v-if="isshowswiper" class="myswiper">
    <transition name="slide">
      <div class="myswiper-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :style="{ transform: this.transformX }">
        <div class="myswiper-slide slide" v-for="(item, index) in slides" :key="index" :style="{ transform: this.slideTransform }">
          <img :src="item.src" alt="" style="max-height: 300px" />
          <div class="myswiper-text">{{ item }}</div>
        </div>
      </div>
    </transition>
    <div class="myswiper-pagination-container">
      <div class="myswiper-left-btn" @click="leftChange">&lt;</div>
      <!-- 分页器 -->
      <div class="myswiper-pagination">
        <span v-for="(slide, index) in slides" :key="index" :class="['myswiper-dot', { active: index === currentIndex }]" @click="goToSlide(index)"></span>
      </div>
      <div class="myswiper-left-btn" @click="rightChange">&gt;</div>
    </div>
  </div>
</div>`,
};